<template>
  <div class="layout">
    <Layout>
      <!--头部导航-->
      <header-vue></header-vue>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <!-- 设置左侧菜单 -->
          <Menu active-name="1" :active-name="activeName"   theme="light" accordion width="auto" @on-select="onSelect"
                @on-open-change="onOpenChange">
            <Submenu v-for="(firstMenu,index) in menuList" :name="firstMenu.name" :key="index">
              <template slot="title">
                <Icon :type="firstMenu.icon"></Icon>
                {{firstMenu.name}}
              </template>
              <MenuItem v-for="(secondMenu,index2) in firstMenu.children" :key="index2" :name="secondMenu.name"
                        :to="{name:`${ secondMenu.toName }`}">
                <i :class="secondMenu.icon"></i>
                <span class="navigate-group-span"> {{secondMenu.name}}</span>
              </MenuItem>
            </Submenu>


            <!--<Submenu name="1">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                基础
              </template>
              <MenuItem name="1-1" :to="{name:'color'}">
                <i class="ivu-icon ivu-icon-ios-color-fill-outline"></i>
                Color
                <span class="navigate-group-span">色彩</span>
              </MenuItem>
              <MenuItem name="1-2" :to="{name:'font'}">
                <i class="ivu-icon ivu-icon-ios-at-outline"></i>
                Font
                <span class="navigate-group-span">字体</span>
              </MenuItem>
              <MenuItem name="1-3" :to="{name:'button'}">
                <i class="ivu-icon ivu-icon-logo-youtube"></i>
                Button
                <span class="navigate-group-span">按钮</span>
              </MenuItem>
              <MenuItem name="1-4" :to="{name:'icon'}">
                <i class="ivu-icon ivu-icon-ios-heart-outline"></i>
                Icon
                <span class="navigate-group-span">图标</span>
              </MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>
                布局
              </template>
              <MenuItem name="2-1" :to="{name:'grid'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-grid-outline"></i>
                Grid
                <span data-v-39279dfe="" class="navigate-group-span">栅格</span>
              </MenuItem>
              <MenuItem name="2-2" :to="{name:'layoutvue'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-browsers-outline"></i>
                Layout
                <span data-v-39279dfe="" class="navigate-group-span">布局</span>
              </MenuItem>
              <MenuItem name="2-3" :to="{name:'card'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-card-outline"></i>
                Card
                <span data-v-39279dfe="" class="navigate-group-span">卡片</span>
              </MenuItem>
              <MenuItem name="2-4" :to="{name:'collpase'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-albums-outline"></i>
                Collapse
                <span data-v-39279dfe="" class="navigate-group-span">折叠面板</span>
              </MenuItem>
              <MenuItem name="2-5" :to="{name:'split'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-square-outline"></i>
                Split
                <span data-v-39279dfe="" class="navigate-group-span">面板分割</span>
              </MenuItem>
              <MenuItem name="2-6" :to="{name:'divider'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-remove"></i>
                Divider
                <span data-v-39279dfe="" class="navigate-group-span">分割线</span>
              </MenuItem>
              <MenuItem name="2-7" :to="{name:'cell'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-list-box-outline"></i>
                Cell
                <span data-v-39279dfe="" class="navigate-group-span">单元格</span>
              </MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                导航
              </template>
              <MenuItem name="3-1" :to="{name:'menu'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-menu"></i>
                Menu
                <span data-v-39279dfe="" class="navigate-group-span">导航菜单</span>
              </MenuItem>
              <MenuItem name="3-2" :to="{name:'tabs'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-more-outline"></i>
                Tabs
                <span data-v-39279dfe="" class="navigate-group-span">标签页</span>
              </MenuItem>
              <MenuItem name="3-3" :to="{name:'dropdown'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-md-arrow-dropdown"></i>
                Dropdown
                <span data-v-39279dfe="" class="navigate-group-span">下拉菜单</span>
              </MenuItem>
              <MenuItem name="3-4" :to="{name:'page'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-book-outline"></i>
                Page
                <span data-v-39279dfe="" class="navigate-group-span">分页</span>
              </MenuItem>
              <MenuItem name="3-5" :to="{name:'breadcrumb'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                Breadcrumb
                <span data-v-39279dfe="" class="navigate-group-span">面包屑</span>
              </MenuItem>
              <MenuItem name="3-6" :to="{name:'badge'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-md-square"></i>
                Badge
                <span data-v-39279dfe="" class="navigate-group-span">徽标数</span>
              </MenuItem>
              <MenuItem name="3-7" :to="{name:'anchor'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-md-link"></i>
                Anchor
                <span data-v-39279dfe="" class="navigate-group-span">锚点</span>
              </MenuItem>
              <MenuItem name="3-8" :to="{name:'steps'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-checkmark-circle-outline"></i>
                Steps
                <span data-v-39279dfe="" class="navigate-group-span">步骤条</span>
              </MenuItem>
              <MenuItem name="3-9" :to="{name:'loadingbar'}">
                <i data-v-39279dfe="" class="ivu-icon ivu-icon-ios-remove"></i>
                LoadingBar
                <span data-v-39279dfe="" class="navigate-group-span">进度条</span>
              </MenuItem>
            </Submenu>
            <Submenu name="4">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                表单
              </template>
              <MenuItem name="4-1" :to="{name:'collpase'}">Option 1</MenuItem>
              <MenuItem name="4-2" :to="{name:'collpase'}">Option 2</MenuItem>
            </Submenu>
            <Submenu name="5">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                视图
              </template>
              <MenuItem name="5-1" :to="{name:'collpase'}">Option 1</MenuItem>
              <MenuItem name="5-2" :to="{name:'collpase'}">Option 2</MenuItem>
            </Submenu>
            <Submenu name="6">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                图表
              </template>
              <MenuItem name="6-1" :to="{name:'collpase'}">Option 1</MenuItem>
              <MenuItem name="6-2" :to="{name:'collpase'}">Option 2</MenuItem>
            </Submenu>
            <Submenu name="7">
            <template slot="title">
              <Icon type="ios-analytics"></Icon>
              其他
            </template>
            <MenuItem name="7-1" :to="{name:'collpase'}">Option 1</MenuItem>
            <MenuItem name="7-2" :to="{name:'collpase'}">Option 2</MenuItem>
          </Submenu>-->
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem>{{firstMenuBtn}}</BreadcrumbItem>
            <BreadcrumbItem>{{secondMenuBtn}}</BreadcrumbItem>
            <BreadcrumbItem>{{thirdMenuBtn}}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '24px', minHeight: '450px', background: '#fff'}">
            <!--右侧主要内容区域-->
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  import HeaderVue from '../components/VHeader'
  // import SidarVue from '../components/VSiderBar'
  // import BreadcrumbVue from '../components/Breadcrumb'

  export default {
    data() {
      return {
        menuList: [],
        secondMenu: [],
        activeName:'',
        firstMenuBtn: '首页',
        secondMenuBtn: '',
        thirdMenuBtn: ''
      }
    },
    created() {
      this.getMenuLsit();
    },
    methods: {
      getMenuLsit() {//获取左侧菜单
        this.$axios.get('/static/json/menuList.json')
          .then(res => {
            // console.log(res.data);
            this.menuList = res.data;
          })
          .catch(err => {
            console.log(err);
          })
      },
      onOpenChange(name) {
        console.log("选择菜单（MenuItem）时触发：" + name);
        this.secondMenuBtn = name.toString();
      },
      onSelect(name) {
        console.log("当 展开/收起 子菜单时触发：" + name);

       this.thirdMenuBtn =  name.toString();
      }
    },
    components: {
      HeaderVue,
      //   BreadcrumbVue,
      //   SidarVue
    }
  }
</script>

<style>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .layout-nav {
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }

  .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
    padding: 14px 10px;
  }
</style>
